<template>
  <view class="content">
    <view
      class="dynamic-item"
      v-for="(item, index) in dynamicList"
      :key="index" @tap="goAyamic"
    >
      <view class="title">
        {{ item.title }}
      </view>
      <view class="details">{{ item.details }}</view>
      <view class="video">
        <image src="@/static/img/header.jpg"></image>
        <u-icon
          class="play"
          name="play-circle"
          color="#fff"
          size="100"
        ></u-icon>
      </view>
      <view class="dynamic-bottom">
        <view class="time">{{ item.time }}</view>
        <view class="dynamic-icon">
          <view>
            <u-icon name="share" color="#aaa" size="30"></u-icon
            ><view>{{ item.share }}</view>
          </view>
          <view>
            <u-icon name="chat" color="#aaa" size="30"></u-icon
            ><view>{{ item.comment }}</view>
          </view>
          <view>
            <u-icon name="star" color="#aaa" size="30"></u-icon>
            <view>{{ item.like }}</view>
          </view>
          <view>
            <u-icon name="thumb-up" color="#aaa" size="30"></u-icon
            ><view>{{ item.good }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="more"> 查看更多 </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dynamicList: [
        {
          title: "不爱喝牛奶的营养师,是这么补钙的",
          details:
            "有没有朋友跟我一样不喜欢喝牛奶？可以自己选择咖啡、无糖酸奶、奶酪。我自己做的拿铁咖啡味道非给阿哈佛回复哇哦",
          video: "",
          time: "2022-20-02 12:00:00",
          share: 8,
          comment: 10,
          like: 19,
          good: 30,
        },
        {
          title: "不爱喝牛奶的营养师,是这么补钙的",
          details:
            "有没有朋友跟我一样不喜欢喝牛奶？可以自己选择咖啡、无糖酸奶、奶酪。我自己做的拿铁咖啡味道非给阿哈佛回复哇哦",
          video: "",
          time: "2022-20-02 12:00:00",
          share: 8,
          comment: 10,
          like: 19,
          good: 30,
        },
        {
          title: "不爱喝牛奶的营养师,是这么补钙的",
          details:
            "有没有朋友跟我一样不喜欢喝牛奶？可以自己选择咖啡、无糖酸奶、奶酪。我自己做的拿铁咖啡味道非给阿哈佛回复哇哦",
          video: "",
          time: "2022-20-02 12:00:00",
          share: 8,
          comment: 10,
          like: 19,
          good: 30,
        },
      ],
    };
  },
  methods:{
    goAyamic(){
       uni.navigateTo({
        url: "/pages/dynamicInfo/dynamicInfo",
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  padding: 0 40rpx;
  border-top: 2rpx solid #ccc;
  .dynamic-item {
    border-bottom: 2rpx solid #ccc;
    padding: 30rpx 0;
    .video {
      position: relative;
      image {
        width: 100%;
        height: 300rpx;
      }
      .play {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -25rpx;
        margin-left: -25rpx;
      }
    }
    .details {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .dynamic-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;
      .time {
        font-size: 20rpx;
      }
      .dynamic-icon {
        display: flex;
        align-items: center;
        > view {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #aaa;
          margin-left: 20rpx;
          font-size: 20rpx;
        }
      }
    }
  }
  .more {
    margin: 30rpx 0;
    text-align: center;
    color: #aaa;
    font-size: 30rpx;
  }
}
</style>